<!-- 库存管理-物料管理-计量单位-多计量 -->
<template>
  <div class="container">
    <div class="content">
      <a-button type="primary" @click="handleClick">
        <template #icon>
          <icon-plus />
        </template>
        新建单位
      </a-button>
    </div>
    <a-divider />
    <a-table
      :pagination="false"
      :stripe="true"
      :columns="columns"
      :data="getUnitData"
      :bordered="{
        headerCell: true,
      }"
    >
      <template #columns>
        <a-table-column :width="80" align="center">
          <template #title> 序号 </template>
          <template #cell="{ rowIndex }">
            {{ rowIndex + 1 }}
          </template>
        </a-table-column>
        <a-table-column
          v-for="item in columns"
          :key="item.id"
          :title="item.title"
          :data-index="item.dataIndex"
          align="center"
        >
          <template v-if="item.dataIndex === 'state'" #cell="{ record }">
            <div
              :class="record.isEnable === 1 ? 'state-item-Y' : 'state-item-N'"
              class="state-item"
            >
              {{ record.isEnable === 1 ? '是' : '否' }}
            </div>
          </template>
        </a-table-column>
        <a-table-column :width="150" align="center">
          <template #title>操作</template>
          <template #cell="{ record }">
            <a-tooltip content="编辑">
              <IconFont
                type="icon-edit"
                :size="26"
                :style="{
                  marginRight: '10px',
                  cursor: 'pointer',
                }"
                @click="EditUnit(record)"
              />
            </a-tooltip>
            <a-tooltip content="删除">
              <a-popconfirm
                content="确认删除？"
                type="error"
                @ok="deleteItem(record.id)"
              >
                <IconFont
                  type="icon-delete"
                  :size="26"
                  :style="{
                    marginRight: '10px',
                    cursor: 'pointer',
                  }"
                />
              </a-popconfirm>
            </a-tooltip>
          </template>
        </a-table-column>
      </template>
    </a-table>
    <addUnit
      v-if="modalVisible"
      v-model:visible="modalVisible"
      @addUnitForm="addUnitForm"
      :formData="UnitForm"
      :title="titleModel"
    />
    <!-- <unitAdd
      type="edit"
      v-model:visible="modalVisible"
      :form="currForm.list"
      @unitEmit="unitEmit"
    ></unitAdd> -->
  </div>
</template>

<script lang="ts" setup>
  import { computed, ref, reactive, onMounted, h } from 'vue';
  import {
    GetUnitList,
    PostUnit,
    DelUnitGroup,
    PutUnit,
  } from '@/api/inventory-management/material-management/index';
  import miiter from '@/utils/mitt';
  import router from '@/router';
  import addUnit from './components/add-unit.vue';

  const modelVisible = ref(false);
  const getUnitData = ref();
  const groupId = ref();
  miiter.on('UnitTable', (val: any) => {
    getUnitData.value = val.data;
    groupId.value = val.groupId;
  });
  const titleModel = ref();
  const UnitForm = ref();
  const getUnitList = async () => {
    // const res = await GetUnitList({ page: 1, size: -1, type: 1 });
    // getUnitData.value = res.content;
  };
  getUnitList();

  let tableRef = ref();

  let modalVisible = ref(false);

  let searchVal = ref(''); // 输入框值

  // 储存当前行的数据
  const currForm = reactive({
    list: {},
  });

  const handleClick = () => {
    UnitForm.value = {
      id: undefined,
      groupId: undefined,
      name: '',
      code: '',
      isDefault: 1,
      isEnable: 1,
      remark: '',
      type: 2,
    };
    modalVisible.value = true;
    titleModel.value = '新增单位类型';
  };
  const columns = [
    {
      title: '单位名称',
      dataIndex: 'name',
    },

    {
      title: '启用状态',
      dataIndex: 'state',
    },
    {
      title: '备注',
      dataIndex: 'remark',
    },
  ];

  const addUnitForm = async (data: any) => {
    if (titleModel.value === '新增单位类型') {
      await PostUnit({ ...data });
      miiter.emit('emitUnit', { groupId: groupId.value });
      // router.go(0);
    } else if (titleModel.value === '编辑单位类型') {
      await PutUnit({ ...data });
      miiter.emit('emitUnit', { groupId: groupId.value });
      // router.go(0);
    }
  };

  const EditUnit = (val) => {
    titleModel.value = '编辑单位类型';
    modalVisible.value = true;
    UnitForm.value = val;
  };

  // 点击搜索按钮
  const search = () => {
    tableRef.value.loadData();
  };

  // 新增完后刷新页面
  const refresh = () => {
    tableRef.value.loadData();
  };

  // 点击重置按钮
  const reset = () => {
    searchVal.value = '';
    tableRef.value.loadData();
  };

  // 监听键盘回车，按了回车也会查询
  const keyDown = (e: any) => {
    if (e.keyCode === 13) {
      tableRef.value.loadData();
    }
  };

  onMounted(() => {
    window.addEventListener('keydown', keyDown); // 监听键盘事件
  });

  // 前往编辑
  const goEdit = (record: any) => {
    modalVisible.value = true;
    currForm.list = record;
  };

  // // 弹出框自定义事件
  // const unitEmit = async (form: any) => {
  //   try {
  //     await PostUnit(form);
  //     tableRef.value.loadData();
  //   } catch (error: unknown) {
  //     console.log(error);
  //   }
  // };

  const deleteItem = async (id: number) => {
    try {
      await DelUnitGroup({ id });
      miiter.emit('Refresh', true);
      // tableRef.value.loadData();
    } catch (error: unknown) {
      console.log(error);
    }
  };
</script>

<style scoped lang="less">
  .container {
    // padding: 0 20px 20px 20px;
    // margin-bottom: 20px;
    width: 100%;

    .content {
      display: flex;
      flex-direction: row-reverse;

      // padding: 20px 10px;
    }
    .state-item {
      position: relative;
      left: 50%;
      transform: translateX(-50%);
    }
    .state-item-Y {
      width: 30px;
      height: 30px;
      font-size: 12px;
      border: 1px solid rgba(148, 191, 255, 1);
      background-color: rgba(232, 243, 255, 1);
      border-radius: 5px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #3d7eff;
    }
    .state-item-N {
      color: #f53f3f;
      width: 30px;
      height: 30px;
      font-size: 12px;
      border: 1px solid rgba(251, 172, 163, 1);
      background-color: rgba(255, 236, 232, 1);
      border-radius: 5px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  :deep(.arco-table-tr) {
    height: 40px;
  }
  :deep(.arco-table-th) {
    font-weight: bold;
  }
  // 扩展行的样式

  // .space-unit {
  //   background-color: var(--color-bg-2);
  //   border-radius: 4px;
  // }

  // .title-fix {
  //   margin: 0 0 12px 0;
  //   font-size: 14;
  // }
  // :deep(.section-title) {
  //   margin: 0 0 12px 0;
  //   font-size: 14px;
  // }
</style>
